<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('额度计算配置')"/>
    <style>
        .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6 {
            height: 35px !important;
        }

        [class^=col-] {
            padding-bottom: 5px;
            padding-top: 5px;
            border: 1px solid #ddd;
        }

        .text-aligin-css {
            text-align: center;
        }

        h3, h4 {
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .panel-heading {
            text-align: center;
            font-size: 24px;
        }

        .panel-body {
            padding-bottom: 0px;
            padding-top: 0px;
        }

        .flex-align-center {
            display: flex;
            justify-content: center;
        }

    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">

    <!--额度计算配置-->
    <form class="form-horizontal m" id="form-calculator-edit" th:object="${sysLoanConfiguration}" style="margin: 0px">
        <h1 style="text-align: center">个人额度计算配置</h1>
        <div class="row">
            <div class="panel-body">
                <div class="panel-group">
                    <div class="panel panel-default">
                        <div class="panel-collapse collapse in">
                            <div class="panel-body">
                                <div class="container-fluid">
                                    <div class="row">
                                        <input name="loanId" th:field="*{loanId}" type="text" hidden="hidden" required>
                                        <div class="col-md-12" style="border: 0px">
                                            <div class="row">
                                                <div class="col-md-3 text-aligin-css"><h3>参数名称</h3></div>
                                                <div class="col-md-3 text-aligin-css"><h3>参数内容</h3></div>
                                                <div class="col-md-3 text-aligin-css"><h3>指标值</h3></div>
                                                <div class="col-md-3 text-aligin-css"><h3>指标说明</h3></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">家庭资产</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">家庭资产</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">家庭负债</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">家庭负债</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">
                                                    <input id="assetsLiabilitiesIndicator" name="assetsLiabilitiesIndicator" th:field="*{assetsLiabilitiesIndicator}" onchange="setIndexValue()" class="form-control" style="text-align: center" type="number" required>
                                                </div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">①贷款额度=（家庭资产-家庭负债）*<span id="assetsLiabilities"></span></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">月收入</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">月收入</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">
                                                    <input id="monthlyIncomeIndicator" name="monthlyIncomeIndicator" th:field="*{monthlyIncomeIndicator}" onchange="setIndexValue()" class="form-control" style="text-align: center" type="number" required>
                                                </div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">②贷款额度=月收入*<span id="monthlyIncome"></span></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">③贷款额度=①或②的较小值</div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">年龄</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">小于20岁</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">
                                                    <input id="personalAgeaIndicator" name="personalAgeaIndicator" th:field="*{personalAgeaIndicator}" onchange="setIndexValue()" class="form-control" style="text-align: center" type="number" required>
                                                </div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">④贷款额度=③*<span id="personalAgea"></span></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">年龄</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">大于等于20岁且小于30岁</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">
                                                    <input id="personalAgebIndicator" name="personalAgebIndicator" th:field="*{personalAgebIndicator}" onchange="setIndexValue()" class="form-control" style="text-align: center" type="number" required>
                                                </div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">④贷款额度=③*<span id="personalAgeb"></span></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">年龄</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">大于等于30岁且小于等于45岁</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">
                                                    <input id="personalAgecIndicator" name="personalAgecIndicator" th:field="*{personalAgecIndicator}" class="form-control" onchange="setIndexValue()" style="text-align: center" type="number" required>
                                                </div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">④贷款额度=③*<span id="personalAgec"></span></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">年龄</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">大于45岁且小于等于55岁</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">
                                                    <input id="personalAgedIndicator" name="personalAgedIndicator" th:field="*{personalAgedIndicator}" onchange="setIndexValue()" class="form-control" style="text-align: center" type="number" required>
                                                </div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">④贷款额度=③*<span id="personalAged"></span></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">年龄</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">大于55岁且小于等于60岁</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">
                                                    <input id="personalAgeeIndicator" name="personalAgeeIndicator" th:field="*{personalAgeeIndicator}" onchange="setIndexValue()" class="form-control" style="text-align: center" type="number" required>
                                                </div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">④贷款额度=③*<span id="personalAgee"></span></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">年龄</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">大于60岁</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">
                                                    <input id="personalAgefIndicator" name="personalAgefIndicator" th:field="*{personalAgefIndicator}" onchange="setIndexValue()" class="form-control" style="text-align: center" type="number" required>
                                                </div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">④贷款额度=③*<span id="personalAgef"></span></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">是否缴纳社保</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">是</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">
                                                    <input id="istrueSocialSecurity" name="istrueSocialSecurity" th:field="*{istrueSocialSecurity}" onchange="setIndexValue()" class="form-control" style="text-align: center" type="number" required>
                                                </div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">⑤贷款额度=④*<span id="istrueSocial"></span></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">是否缴纳社保</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">否</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">
                                                    <input id="isfalseSocialSecurity" name="isfalseSocialSecurity" th:field="*{isfalseSocialSecurity}" onchange="setIndexValue()" class="form-control" style="text-align: center" type="number" required>
                                                </div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">⑤贷款额度=④*<span id="isfalseSocial"></span></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">是否缴纳公积金</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">是</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">
                                                    <input id="istrueAccumulationFund" name="istrueAccumulationFund" th:field="*{istrueAccumulationFund}" onchange="setIndexValue()" class="form-control" style="text-align: center" type="number" required>
                                                </div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">⑥贷款额度=⑤*<span id="istrueAccumulation"></span></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">是否缴纳公积金</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">否</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">
                                                    <input id="isfalseAccumulationFund" name="isfalseAccumulationFund" th:field="*{isfalseAccumulationFund}" onchange="setIndexValue()" class="form-control" style="text-align: center" type="number" required>
                                                </div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">⑥贷款额度=⑤*<span id="isfalseAccumulation"></span></div>
                                            </div>
                                            <div class="row" style="display: flex">
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px;font-weight: 900">最终额度</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">最终额度</div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px"></div>
                                                <div class="col-md-3 text-aligin-css" style="display: flex; justify-content: center; align-items: center;font-size: 15px">最终额度=⑥</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var prefix = ctx + "system/configuration";
    $("#form-calculator-edit").validate({
        focusCleanup: true
    });
    setIndexValue();
    function setIndexValue() {
        $("#assetsLiabilities").html($("#assetsLiabilitiesIndicator").val());
        $("#monthlyIncome").html($("#monthlyIncomeIndicator").val());
        $("#personalAgea").html($("#personalAgeaIndicator").val());
        $("#personalAgeb").html($("#personalAgebIndicator").val());
        $("#personalAgec").html($("#personalAgecIndicator").val());
        $("#personalAged").html($("#personalAgedIndicator").val());
        $("#personalAgee").html($("#personalAgeeIndicator").val());
        $("#personalAgef").html($("#personalAgefIndicator").val());
        $("#istrueSocial").html($("#istrueSocialSecurity").val());
        $("#isfalseSocial").html($("#isfalseSocialSecurity").val());
        $("#istrueAccumulation").html($("#istrueAccumulationFund").val());
        $("#isfalseAccumulation").html($("#isfalseAccumulationFund").val());
    }
    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/editLoanConfiguration", $('#form-calculator-edit').serialize());
        }
    }
</script>
</body>
</html>